'use client'

import React from 'react'
import { useRouter } from 'next/navigation'
import { Layout, Typography } from 'antd'
import LoginForm from '../../components/LoginForm'
import { useAuth } from '../../contexts/AuthContext'

const { Content } = Layout
const { Title, Paragraph } = Typography

export default function LoginPage() {
    const router = useRouter()
    const { login } = useAuth()

    // 登录成功后的处理
    const handleLoginSuccess = (user) => {
        console.log('Login successful, user:', user)
        login(user)
        console.log('Redirecting to products...')
        router.push('/products')
    }

    // 切换到注册页面
    const handleSwitchToRegister = () => {
        router.push('/register')
    }

    return (
        <Layout className="min-h-screen bg-gray-50">
            <Content className="flex items-center justify-center p-4">
                <div className="w-full max-w-2xl">
                    {/* 页面标题 */}
                    <div className="text-center mb-8">
                        <Title level={1} className="mb-2">
                            欢迎回来
                        </Title>
                        <Paragraph className="text-lg text-gray-600">
                            登录您的账户，继续使用产品展示平台
                        </Paragraph>
                    </div>

                    {/* 登录表单 */}
                    <LoginForm
                        onSuccess={handleLoginSuccess}
                        onSwitchToRegister={handleSwitchToRegister}
                    />
                </div>
            </Content>
        </Layout>
    )
}